<%--
  Created by IntelliJ IDEA.
  User: teacher
  Date: 2022/4/22
  Time: 13:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Ajax返回JSON对象</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script>
        function show(id,e){
            $("#d").show();
            // dataType为默认值
            <%--$.get("${pageContext.request.contextPath}/findById.user?id="+id,--%>
                <%--function(result){--%>
                    <%--let user = eval("("+result+")");--%>
                    <%--$("#s1").html(user.id);--%>
                    <%--$("#s2").html(user.username);--%>
                    <%--$("#s3").html(user.password);--%>
                    <%--$("#s4").html(user.phone);--%>
                    <%--$("#s5").html(user.address);--%>
                <%--});--%>

            // dataType为json
            <%--$.get("${pageContext.request.contextPath}/findById.user?id="+id,--%>
                <%--function(user){--%>
                    <%--// 当dataType值为json时--%>
                    <%--// 会自动把响应的数据转换成JSON--%>
                    <%--$("#s1").html(user.id);--%>
                    <%--$("#s2").html(user.username);--%>
                    <%--$("#s3").html(user.password);--%>
                    <%--$("#s4").html(user.phone);--%>
                    <%--$("#s5").html(user.address);--%>
                <%--},"json");--%>

            // getJSON
            $.getJSON("${pageContext.request.contextPath}/findById.user?id="+id,
                function(user){
                    // 当dataType值为json时
                    // 会自动把响应的数据转换成JSON
                    $("#s1").html(user.id);
                    $("#s2").html(user.username);
                    $("#s3").html(user.password);
                    $("#s4").html(user.phone);
                    $("#s5").html(user.address);
                });
        }

        function hide(){
            $("#d").hide();
        }
    </script>
</head>
<body>
<!--
    需求一:查询所有用户信息
        此处使用传统的web请求
        查询t_user中所有的用户信息
        将用户名在列表中展现
-->
<ul>
    <c:forEach items="${users}" var="user">
        <li onmouseover="show(${user.id},event)" onmouseout="hide()">${user.username}</li>
    </c:forEach>
</ul>
<hr/>
<!--
    需求二:显示用户详情
        使用Ajax实现该功能
        div默认隐藏,当鼠标悬停在某一个用户名上
        则查询该用户的详情,将详情在div中展现
        且div在鼠标旁边显示出来
        当鼠标离开列表后,div隐藏
-->
<div id="d" style="background: #dddddd;width: 300px;padding: 10px;display: none;position: absolute;">
    编号:<span id="s1">1</span><br/>
    用户名:<span id="s2">aa</span><br/>
    密码:<span id="s3">123456</span><br/>
    电话:<span id="s4">13812345678</span><br/>
    地址:<span id="s5">江苏-南京</span><br/>
</div>
</body>
</html>
